<template>
    <div class="wrapper">
        <div class="goods-sort">
            <div :class="{'goods-sort-complex':true,activeTag:selectSort=='goods'}" @click="dragToggle('goods')">
                <span>{{nowText}}</span>
                <i :class="{iconfont:true,'icon-sanjiaodown':true,'icon-sanjiaodown-active':dragFlag==true}"></i>
            </div>
            <div :class="{'goods-sort-sales':true,activeTag:selectSort=='sales'}" @click="dragToggle('sales')">销量</div>
        </div>


        <!-- 下拉菜单 -->
        <div 
        :class="{'drag-wrapper':true, 'drag-wrapper-active':dragFlag==true}">
            <div 
            :class="{'drag-item':true,'drag-item-active':dragItemIndex==index}"
            v-for="(item,index) of dragItem"
            :key="index" 
            @click="selectItem(item,index)"
            >
                <div>{{item.name}}</div>
                <div v-show="dragItemIndex==index"><i class="iconfont icon-gou"></i></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dragItem:[
                {name:'综合',value:''},
                {name:'价格降序',value:''},
                {name:'价格升序',value:''}
            ],
            nowText:'综合',//选中的状态
            dragFlag:false,//下拉菜单的显示状态
            selectSort:'goods',//tabBar的选中项
            dragItemIndex:''//下拉菜单的选中项
        }
    },
    methods: {
        dragToggle(item){
            //点击下拉
            this.selectSort=item;
            if(item=='sales'){
                this.dragFlag=false
                this.$emit('dragSelect',{name:'销量',value:''})
                return
            }
            this.dragFlag=!this.dragFlag;
        },
        selectItem(item,index){
            // 点击下拉菜单

            this.nowText=item.name;
            this.dragItemIndex=index
            this.dragToggle();
            this.$emit('dragSelect',item)
        }
    },
}
</script>
<style lang="scss" scoped>
.wrapper{
    width: 100%;
    position: relative;
    margin:10px 0;
}
    .goods-sort{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        
        height: 30px;
        &>div{
            display: flex;
        }
        .goods-sort-complex{
            span{
                padding:0 10px;
            }
            .icon-sanjiaodown{
                color:red;
                transition:all 200ms;
                // transform: rotate(0);
                
            }
            .icon-sanjiaodown-active{
                transform: rotate(180deg)
            }
        }
    }

    .activeTag{
        color:red
    }
    .drag-item-active{
        color:red;
    }
    .drag-wrapper{
        height: 0;
        transition:all 200ms;
        overflow: hidden;
        width: 100%;
        background: #fff;
        position: absolute;
        top:30px;
        &>div{
            height: 40px;
            border-bottom: 1px solid #eee;
        }
        .drag-item{
            display: flex;
            justify-content: space-between;
            align-items: center
        }
        .iconfont{
            color:red
        }
    }
    .drag-wrapper-active{
        height: 130px;
    }
</style>
